<template>
	<div class="trade" id="trade">
		<div class="tip">
			<img src="../../../static/imgs/cnyTitle.png" />
			<label>BTC买卖交易</label>
		</div>
		<div class="checkbox">
			<input type="checkbox" />显示k线行情
		</div>

		<div class="work">
			<div class="title">
				<span v-on:click="trade(1)" :class="{ 'active': trade_index == 1 }">市价</span>
				<span v-on:click="trade(2)" :class="{ 'active': trade_index == 2 }">限价</span>
				<span v-on:click="trade(3)" :class="{ 'active': trade_index == 3 }">止盈止损</span>
				<span v-on:click="trade(4)" :class="{ 'active': trade_index == 4 }">计划委托</span>
			</div>
			<div v-if="trade_index == 1" style="overflow: hidden;">
				<div class="work_left">
					<marketbuy></marketbuy>
	
					<marketshell></marketshell>
				</div>
				<div class="work_right">
					<marketdepth></marketdepth>
				</div>
			</div>
			<div v-if="trade_index == 2">
				<div class="work_left">
					<limitbuy></limitbuy>
	
					<limitshell></limitshell>
				</div>
				<div class="work_right">
					<marketdepth></marketdepth>
				</div>
			</div>
			<div v-if="trade_index == 3">
				33333
			</div>
			<div v-if="trade_index == 4">
				4
			</div>

			<div>
			</div>
		</div>
	</div>

</template>

<script>
	import marketbuy from './pannel/market_buy';
	import marketshell from './pannel/market_shell';
	import limitbuy from './pannel/limit_buy';
	import limitshell from './pannel/limit_shell';
	import marketdepth from './pannel/depth';

	import plan from './pannel/plan';
	import stop from './pannel/stop';

	export default {
		name: 'btctrade',
		computed: {
			isLogged() {
				return this.$store.getters.isLogged;
			}
		},
		data() {
			return {
				title: '',
				trade_index: 1,
			}
		}, //定义变量
		components: {
			marketbuy,
			marketshell,
			limitbuy,
			limitshell,
			marketdepth,
		}, //注册组件
		methods: { //方法都在这里
			trade: function(index) {
				this.trade_index = index;
			}
		},
		mounted() {
			var that = this;
			//获取banner
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	.trade {
		text-align: left;
		.checkbox {
			height: 70px;
			line-height: 70px;
		}
		.tip {
			font-size: 26px;
			line-height: 58px;
			height: 58px;
			background-color: #f4f4f4;
			padding-left: 15px;
			img {
				height: 28px;
				width: 28px;
				top: 3px;
				margin-right: 5px;
				position: relative;
			}
		}
		.work {
			.title {
				background: #f4f4f4;
				height: 44px;
				font-size: 14px;
				border-left: 1px solid #e1e1e1;
				border-right: 1px solid #e1e1e1;
				span {
					width: 175px;
					height: 44px;
					display: inline-block;
					text-align: center;
					line-height: 44px;
					cursor: pointer;
				}
			}
			.active {
				background-color: #fff;
				color: #0093f1;
				font-size: 14px;
				font-weight: 600;
				border-top: 3px solid #0093f1;
			}
			.market_work {}
			.work_left{
				float: left;
				border: 1px solid #e1e1e1;
				border-top: none;
				border-right: none;
				overflow: hidden;
			}
			.work_right{
				float: left;
				border: 1px solid #e1e1e1;
				border-top: none;
			}
		}
	}
</style>